<template>
    <div>
        <div id="head">
            <div>您的专属税务助手</div>
            <div>开发票报税一键搞定，足不出户税无忧</div>
            <router-link to="/consult/1/账户申请" tag="div">马上使用</router-link>
        </div>
        <div id="free">
            <div>我是自由职业者</div>
            <div id="fr_box">
                <div class="fitem" v-for="(job, i) in jobs" :class="{curr: i == curr}" @click="toggle(i)">
                    <div :style="{'background-image': 'url('+ job.header +')'}"></div>
                    <div>{{job.name}}</div>
                </div>
            </div>
            <div id="f_js">
                <div>{{jobs[curr].work}}</div>
                <div>{{jobs[curr].text}}</div>
            </div>
        </div>
        <div id="intro">
            <div>痛点问题</div>
            <div v-for="nmsg in nmsgs" :key="nmsg.title" class="nitem" :class="{ashow: $parent.scrollTop > nmsg.offsetTop}">
                <div :style="{'background-image': 'url('+ nmsg.img +')'}"></div>
                <div :style="{top: nmsg.top, opacity: nmsg.opacity}">{{nmsg.title}}</div>
                <div :style="{top: nmsg.top, opacity: nmsg.opacity}">
                    <p v-for="text in nmsg.text">{{text}}</p>
                </div>
            </div>
        </div>
        <div id="ipat">
            <div>爱收入模式下</div>
            <div class="pitem" v-for="(ipa, i) in ipat">
                <p>{{ipa}}</p>
                <p v-if="i != ipat.length - 1">|</p>
            </div>
        </div>
        <div id="trad">
            <div>传统模式下</div>
            <div class="pitem" v-for="(tra, i) in trad">
                <p>{{tra}}</p>
                <p v-if="i != ipat.length - 1">|</p>
            </div>
        </div>
        <div id="flow">
            <div>服务流程</div>
            <div id="fl_box">
                <div v-for="flo in flow">
                    <div class="center">
                        <p v-for="text in flo">{{text}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="assure">
            <div class="aitem" v-for="sure in assure" :key="sure.text">
                <div :style="{'background-image': 'url('+ sure.icon +')'}"></div>
                <div>{{sure.text}}</div>
            </div>
        </div>
        <div id="complain">
            <div>投诉渠道</div>
            <div class="citem" v-for="com in complain" :key="com.issue">
                <div>{{com.issue}}</div>
                <div>{{com.answer}}</div>
            </div>
        </div>
        <div id="consult" @click="consult">在线咨询</div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      jobs: [
        {
          header: require("../assets/ishouru/job_0.png"),
          name: "直播",
          work: "直播 - 苏小姐 月收入80,000元",
          text:
            "苏小姐与某直播平台签订了劳务协议，每月获得80,000元的劳务费用收入，资金从直播平台的账户直接转给苏小姐个人账号，转账前个税已经扣除。因此，苏小姐毛收入80,000元，个税18,600元，实际收益仅61,400元，个税税赋率40%。收入降低了近2万。"
        },
        {
          header: require("../assets/ishouru/job_1.png"),
          name: "设计师",
          work: "设计师 - 王先生 月收入30,000元",
          text:
            "王先生是名设计师，与公司A签订了劳务协议，平均每月可获得30,000元的劳务费用收入，资金从A公司的账户直接转给王先生个人账号，转账前个税已经扣除。因此，王先生毛收入30,000元，个税5,200元，实际收益仅24,800元，个税税赋率30%。 整整飞走了5,000多元！"
        },
        {
          header: require("../assets/ishouru/job_2.png"),
          name: "网红",
          work: "网红 - 刘小姐 月收入100,000元",
          text:
            "刘小姐是某知名网红，承接广告业务，与合作商签订劳务协议，平均每月可获得100,000元的劳务费用收入，资金从合作商公司的账户直接转给刘小姐个人账号，转账前个税已经扣除。因此，刘小姐毛收入100,000元，个税25,000元，实际收益仅75,000元，个税税赋率40%。白白没了2.5万元。"
        }
      ],
      curr: 1,
      time: null,
      nmsgs: [
        {
          img: require("../assets/ishouru/icon_0.png"),
          title: "无法提供发票",
          text: ["不懂繁杂的税务流程", "痛失竞争优势"],
          top: '1rem',
          opacity: 0.3,
          offsetTop: 0
        },
        {
          img: require("../assets/ishouru/icon_1.png"),
          title: "报税不合规",
          text: ["私对私转账", "找朋友公司开票", "存在逃税风险"],
          top: '1rem',
          opacity: 0.3,
          offsetTop: 0
        },
        {
          img: require("../assets/ishouru/icon_2.png"),
          title: "税负高",
          text: ["按照劳务所得报税", "税率高达20%~40%"],
          top: '1rem',
          opacity: 0.3,
          offsetTop: 0
        }
      ],
      ipat: [
        "使用在爱收入设立的个人工作室签订服务协议，每月3万服务费",
        "直接从公司账户达到个人账户",
        "综合税费 900 元",
        "29,100 元",
        "综合税率 3%"
      ],
      trad: [
        "签订劳务协议每个月3万的劳务费",
        "直接从客户公司账户达到个人账户",
        "平台代缴个税 5200 元",
        "24,800 元",
        "个税税率 30 %"
      ],
      flow: [
        ["注册登录"],
        ["下单支付"],
        ["根据订单信息", "提交或寄送资料"],
        ["服务团队为您", "开设个人工作室"],
        ["提交开票申请"],
        ["上传依据"],
        ["等待爱收入服务", "团队为您符合"],
        ["平台寄送发票", "并进行纳税申报"]
      ],
      assure: [
        {
          icon: require("../assets/ishouru/a_0.png"),
          text: "及时响应"
        },
        {
          icon: require("../assets/ishouru/a_1.png"),
          text: "投诉渠道"
        },
        {
          icon: require("../assets/ishouru/a_2.png"),
          text: "短信/微信"
        },
        {
          icon: require("../assets/ishouru/a_3.png"),
          text: "注册不成功无理由退款"
        }
      ],
      complain: [
        {
          issue: "Q1.注册工作室需要用户做什么？",
          answer:
            "A1.需要身份证原件，身份证复印件 只要在线填写资料并邮寄申报税全部代你申报，代扣代缴普票全代理（开专票需要本人到当地确认），顺丰包邮。"
        },
        {
          issue: "Q2.注册工作室需要用户做什么？",
          answer:
            "A1.需要身份证原件，身份证复印件 只要在线填写资料并邮寄申报税全部代你申报，代扣代缴普票全代理（开专票需要本人到当地确认），顺丰包邮。"
        },
        {
          issue: "Q3.注册工作室需要用户做什么？",
          answer:
            "A1.需要身份证原件，身份证复印件 只要在线填写资料并邮寄申报税全部代你申报，代扣代缴普票全代理（开专票需要本人到当地确认），顺丰包邮。"
        }
      ]
    };
  },
  activated() {
    this.$parent.tState = 1;
    this.$parent.fState = 1;
    this.$parent.updata();
  },
  mounted() {
    this.go();
    var arr = Array.prototype.slice.call(this.$el.children[2].children, 1);
    var _this = this
    arr.forEach((e, i) => {
      _this.nmsgs[i].offsetTop = e.offsetTop - document.body.clientHeight * 0.8
    })
  },
  methods: {
    toggle(a) {
      this.curr = a;
      clearTimeout(this.time)
      this.go()
    },
    go() {
      this.time = setTimeout(function() {
          this.curr++;
          this.curr = this.curr % 3;
          this.go()
      }.bind(this),1000 * 15);
    },
    consult() {
      location.href = 'https://qiyukf.com/client?k=3bb03a223ff45e6fc1e527ce74cd25e3&u=&d=elxhcgubcppxvblfv3bv&uuid=toevh0zihxwvonhknh3z&gid=0&sid=0&qtype=0&dvctimer=0&robotShuntSwitch=0&hc=0&robotId=0&t=%25E5%258C%2597%25E4%25BA%25AC%25E5%2590%2588%25E7%2590%2586%25E9%2581%25BF%25E7%25A8%258E_%25E5%258C%2597%25E4%25BA%25AC%25E4%25BC%2581%25E4%25B8%259A%25E9%2581%25BF%25E7%25A8%258E%25E8%258A%2582%25E7%25A8%258E_%25E5%258C%2597%25E4%25BA%25AC%25E7%25A8%258E%25E7%25AD%25B9%25E4%25BC%2598%25E5%258C%2596_%25E7%2588%25B1%25E5%2591%2598%25E5%25B7%25A5'
    }
  }
};
</script>
<style scoped>
#head {
  height: 6.19rem;
  padding-top: 1rem;
  background-size: cover;
  background-image: url("~@/assets/ishouru/banner.png");
  text-align: center;
}
#head > div:nth-child(1) {
  font-size: 0.42rem;
  color: #fff;
}
#head > div:nth-child(2) {
  font-size: 0.28rem;
  color: #999;
  margin-top: 0.1rem;
}
#head > div:nth-child(3) {
  position: relative;
  display: inline-block;
  width: 2.1rem;
  height: 0.64rem;
  border-radius: 0.32rem;
  border: 0.01rem solid #ed5172;
  font-size: 0.28rem;
  color: #ed5172;
  line-height: 0.62rem;
  top: 0.5rem;
}
#free {
  padding: 1.6rem 0 0;
}
#free > div:nth-child(1) {
  text-align: center;
  font-size: 0.36rem;
  color: #333;
  font-weight: bold;
}
#fr_box {
  display: flex;
  justify-content: space-around;
}
.fitem {
  width: 1.6rem;
  text-align: center;
  font-size: 0.3rem;
  color: #999;
  box-sizing: content-box;
}
.fitem > div:nth-child(1) {
  width: 1.6rem;
  height: 1.6rem;
  background-size: cover;
  margin: 0.5rem 0 0.3rem;
  border-radius: 50%;
}
.curr {
  color: #ed5172;
}
.curr > div:nth-child(1) {
  border: 0.01rem solid #ccc;
}
#f_js {
  padding: 0.6rem 0.5rem 1.6rem;
}
#f_js > div:nth-child(1) {
  font-size: 0.3rem;
  color: #333;
  font-weight: bold;
}
#f_js > div:nth-child(2) {
  font-size: 0.28rem;
  color: #999;
  margin-top: 0.3rem;
  letter-spacing: 0.01rem;
}
#intro {
  text-align: center;
}
#intro > div:nth-child(1) {
  font-size: 0.36rem;
  color: #333;
  font-weight: bold;
}
#ipat {
  /* background-color: #ed5172; */
  margin: 0 0.36rem;
  text-align: center;
  padding: 0.6rem 0.45rem 0.75rem;
  color: #fff;
  background-size: cover;
  background-image: url('~@/assets/ishouru/bg.png');
}
#ipat > div:nth-child(1) {
  font-size: 0.36rem;
  font-weight: bold;
  margin-bottom: 0.7rem;
}
.pitem {
  font-size: 0.28rem;
}
.pitem > p:nth-child(2) {
  margin: 0.1rem 0;
  font-size: 0.4rem;
  opacity: 0.2;
}
#trad {
  background-color: #f9f9f9;
  margin: 0 0.36rem;
  text-align: center;
  padding: 0.6rem 0.45rem 0.75rem;
  color: #333;
}
#trad > div:nth-child(1) {
  font-size: 0.36rem;
  font-weight: bold;
  margin-bottom: 0.7rem;
}
#flow {
  color: #333;
  padding-top: 1.25rem;
  text-align: center;
}
#flow > div:nth-child(1) {
  font-size: 0.36rem;
  font-weight: bold;
}
#fl_box {
  margin-top: 1rem;
  padding: 0 1.2rem;
  margin-bottom: 1.45rem;
  height: 10.5rem;
  /* width: 0.74rem; */
  background-image: url("~@/assets/ishouru/f_bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  color: #333;
  font-size: 0.28rem;
}
#fl_box > div {
  position: relative;
  display: table;
  width: 100%;
  clear: both;
  height: 0.64rem;
  margin-bottom: 0.74rem;
}
.center {
  display: table-cell;
  vertical-align: middle;
}
#fl_box p {
  width: 2rem;
  text-align: center;
}
#fl_box > div:nth-child(2n) {
  padding-left: calc(100% - 2rem);
}
#fl_box > div:nth-child(2n + 1) {
  padding-right: calc(100% - 2rem);
}
#assure {
  display: flex;
  justify-content: space-around;
  height: 3.7rem;
  background-color: #f4f5f7;
  padding-top: 1rem;
}
.aitem {
  width: 1.2rem;
}
.aitem > div:nth-child(1) {
  height: 0.48rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.aitem > div:nth-child(2) {
  font-size: 0.28rem;
  color: #333;
  margin-top: 0.35rem;
}
#complain {
  padding: 1.25rem 0.28rem 0;
}
#complain > div:nth-child(1) {
  color: #333;
  font-size: 0.36rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.6rem;
}
.citem {
  margin-bottom: 0.5rem;
}
.citem > :nth-child(1) {
  font-size: 0.3rem;
  color: #333;
  margin-bottom: 0.2rem;
}
.citem > div:nth-child(2) {
  font-size: 0.28rem;
  color: #999;
  line-height: 0.48rem;
}
#consult {
  width: 4rem;
  height: 0.72rem;
  border-radius: 0.36rem;
  background-color: #ed5172;
  color: #fff;
  line-height: 0.72rem;
  font-size: 0.32rem;
  margin: 0.9rem auto 1.55rem;
  text-align: center;
}
</style>